<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18">
        <div style="margin-left: 0">正在热映</div>
        <el-divider></el-divider>
        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="5" v-for="movie in topNewMovieList">
            <div class="grid-content bg-purple demo-image__preview" style="height: 380px; width: 100%; padding-top: 10px">
              <el-row>
                <el-col>
                  <div style="position: relative;">
                    <el-image
                        style="height: 300px; width: 90%; border-radius: 10px"
                        :src="movie.moviePic" @click="handlegotomovie(movie)">
                    </el-image>
                    <div class="is-background">
                      <div class="grid-name">{{movie.movieName}}</div>
                      <div class="grid-name grid-score">{{movie.score/movie.peoples | toFixed}}</div>
                    </div>
                  </div>
                </el-col>
              </el-row>
              <el-button style="width: 90%">购票</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="5" v-for="movie in bottomNewMovieList"><div class="grid-content bg-purple demo-image__preview" style="height: 380px;width: 100%; padding-top: 10px">
            <el-row><el-col>
              <div style="position: relative;">
                <el-image
                    style="height: 300px; width: 90%; border-radius: 10px"
                    :src="movie.moviePic">
                </el-image>
                <div class="is-background">
                  <div class="grid-name">{{movie.movieName}}</div>
                  <div class="grid-name grid-score">{{movie.score/movie.peoples | toFixed}}</div>
                </div>
              </div>
            </el-col></el-row>
            <el-button style="width: 90%">购票</el-button>
          </div></el-col>
        </el-row>
        <el-divider></el-divider>
        <div style="margin-left: 0">最受期待</div>
        <el-divider></el-divider>
        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="5" v-for="movie in topWantMovieList"><div class="grid-content bg-purple demo-image__preview" style="height: 380px; width: 100%; padding-top: 10px">
            <el-row><el-col>
              <div style="position: relative;">
                <el-image
                    style="height: 300px; width: 90%; border-radius: 10px"
                    :src="movie.moviePic">
                  <!--                  :preview-src-list="srcList">-->
                </el-image>
                <div class="is-background">
                  <div class="grid-name">{{movie.movieName}}</div>
                  <div class="grid-name grid-want" v-if="movie.want>=10000">{{movie.want/10000 | toFixed2}}</div>
                  <div class="grid-name grid-want" v-if="movie.want<10000">{{movie.want}}人想看</div>
                </div>
              </div>
            </el-col></el-row>
            <el-button style="width: 90%">查看电影</el-button>
          </div></el-col>
        </el-row>
        <el-row :gutter="20" type="flex" justify="space-around">
          <el-col :span="5" v-for="movie in bottomWantMovieList"><div class="grid-content bg-purple demo-image__preview" style="height: 380px;width: 100%; padding-top: 10px">
            <el-row><el-col>
              <div style="position: relative;">
                <el-image
                    style="height: 300px; width: 90%; border-radius: 10px"
                    :src="movie.moviePic">
                  <!--                  :preview-src-list="srcList">-->
                </el-image>
                <div class="is-background">
                  <div class="grid-name">{{movie.movieName}}</div>
                  <div class="grid-name grid-want" v-if="movie.want>=10000">{{movie.want/10000 | toFixed2}}</div>
                  <div class="grid-name grid-want" v-if="movie.want<10000">{{movie.want}}</div>
                </div>
              </div>
            </el-col></el-row>
            <el-button style="width: 90%">查看电影</el-button>
          </div></el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-row :gutter="20" type="flex" justify="space-around"><el-col :span="20"><div class="grid-content bg-purple"></div></el-col></el-row>
        <el-row :gutter="20" type="flex" justify="space-around"><el-col :span="20"><div class="grid-content bg-purple"></div></el-col></el-row>
        <el-row :gutter="20" type="flex" justify="space-around"><el-col :span="20"><div class="grid-content bg-purple"></div></el-col></el-row>
        <el-row :gutter="20" type="flex" justify="space-around"><el-col :span="20"><div class="grid-content bg-purple"></div></el-col></el-row>
        <el-row :gutter="20" type="flex" justify="space-around"><el-col :span="20"><div class="grid-content bg-purple"></div></el-col></el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from "vue";
/**
 * 使用Vue过滤器，{{value | 过滤器名}}调用过滤器，执行function方法
 * 此过滤器用于为保存小数点后1位，调用toFixed方法，将‘|’前的数据传入过滤器，判断value是否合法，不合法则返回‘暂无评分’，合法则使用toFixed()方法，返回方法内指定的小数点后位数
 * */
Vue.filter('toFixed', function (value){
  if (!value) return '暂无评分'
  return Number(value).toFixed(1)+'分'
})
Vue.filter('toFixed2', function (value){
  if (!value) return '暂无想看'
  return Number(value).toFixed(2)+'万人想看'
})
export default {
  name: "index",
  data() {
    return {
      topNewMovieList: [],
      bottomNewMovieList: [],
      topWantMovieList: [],
      bottomWantMovieList: []
    }
  },
  created() {
    this.handleGetNewMovieList()
    this.handleGetWantMovieList()
    this.$router.path = '/index'
  },
  methods: {
    handleGetNewMovieList(){
      this.axios.get("/web/index/getNewMovieList").then(response => {
        const newMovieList = response.data.data
        if (newMovieList.length > 0) {
          if (newMovieList.length > 0 && newMovieList.length <= 4){
            this.topNewMovieList=newMovieList;
          }else{
            for (var i = 0; i < 4; i++) {
              this.topNewMovieList.push(newMovieList[i]);
            }
            if (newMovieList.length > 4){
              for (var i = 4; i < newMovieList.length; i++) {
                this.bottomNewMovieList.push(newMovieList[i]);
              }
            }
          }
        }
      })
    },
    handlegotomovie(movie){
      this.$router.push({path: "/webMenu/WebMovieDetailPage", query: {
          movie: movie
        }})
    },
    handleGetWantMovieList(){
      this.axios.get("/web/index/getWantMovieList").then(response => {
        const wantMovieList = response.data.data
        if (wantMovieList.length > 0) {
          if (wantMovieList.length > 0 && wantMovieList.length <= 4){
            this.topWantMovieList=wantMovieList;
          }else{
            for (var i = 0; i < 4; i++) {
              this.topWantMovieList.push(wantMovieList[i]);
            }
            if (wantMovieList.length > 4){
              for (var i = 4; i < wantMovieList.length; i++) {
                this.bottomWantMovieList.push(wantMovieList[i]);
              }
            }
          }
        }
      })
    },
  }
}
</script>

  <style scoped>
  .el-row {
    margin-bottom: 20px;
    /*&:last-child {*/
    /*   margin-bottom: 0;*/
    /*}*/
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .is-background{
    position: absolute;
    display: flex;
    justify-content: space-around;
    left: 5%;
    height: 50px;
    width: 90%;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    bottom: 4px;
    background-image: url("http://localhost:8081/upload/background.jpg");
  }
  .grid-name {
    line-height: 55px;
    font-size: 18px;
    bottom: 5px;
    font-style: oblique;
    color: white;
  }
  .grid-score {
    line-height: 55px;
    font-size: 22px;
    bottom: 5px;
    font-style: oblique;
    color: orange;
  }
  .grid-want {
    line-height: 55px;
    font-size: 15px;
    bottom: 5px;
    font-style: oblique;
    color: white;
  }
</style>